<template>
  <div class="page">
    <!-- 导航栏 -->
    <uni-nav-bar fixed="true" :title="pageTitle" statusBar="true" :border="false" left-icon="left"
      @clickLeft="back"></uni-nav-bar>
    <!-- 页面主体 -->
    <div class="container">
      <div class="edit-box">
        <text class="title">题目</text>
        <textarea class="textarea" placeholder="请输入题目名称" v-model="currentQuestion.title" auto-height />
      </div>
      <div class="edit-box">
        <text class="title">输入框提示</text>
        <textarea class="textarea" placeholder="请输入" v-model="currentQuestion.placeholder" auto-height maxlength="18" />
      </div>
      <div class="question-type">
        <text class="title">题目类别</text>
        <div class="type-container">
          <DragAndSort v-model="categoryList" :activated-item="currentQuestionCategory" @change="changeQuestionCategory"
            @sort="sortHandle">
          </DragAndSort>
        </div>
      </div>

      <div class="bottom" @click="confirmBtnClick">
        <button class="confirm-btn">确定</button>
      </div>
    </div>

  </div>
</template>

<script lang="ts" setup>
import { ref, } from 'vue';
import { useQuestionnaire } from '@/stores/questionnaire';
import { back } from '@/utils/navigate';
import { onLoad } from '@dcloudio/uni-app';
import { random8BitId, showToast } from '@/utils/tools';
import { blankQuestionTemplate } from '@/static/constants/questionnaire-constant';
import DragAndSort from '@/components/drag-and-sort.vue';
import { onMounted } from 'vue';

const questionnaire = useQuestionnaire()
const { currentQuestionCategoryList, sortQuestionListsByCategory } = questionnaire

/** 页面状态 */
const pageStatus = ref<'add' | 'edit' | 'insert'>('add')

/** 页面标题 */
const pageTitle = ref<string>('')

/** 当前编辑的问题 */
const currentQuestion = ref<Question>((blankQuestionTemplate))

/** 当前编辑的问题的题目类别 */
const currentQuestionCategory = ref('')

/** 问题原计划要添加到的分类 */
let questionCategoryToAdd = ''

/** 当前编辑的问题要插入的位置，默认为-1（即最后） */
const currentQuestionPosition = ref<number>(-1)

// 在onLoad时，根据传入的参数，判断是「编辑题目」还是「添加题目」
onLoad((options: any) => {
  pageStatus.value = options.type
  switch (options.type) {
    // 新增题目
    case 'add':
      pageTitle.value = '添加题目'
      currentQuestion.value = {
        ...blankQuestionTemplate,
        id: random8BitId()
      }
      currentQuestionCategory.value = questionnaire.currentQuestionCategoryList[0]
      break
    // 插入题目
    case 'insert':
      pageTitle.value = '添加题目'
      currentQuestion.value = {
        ...blankQuestionTemplate,
        id: random8BitId()
      }
      currentQuestionCategory.value = options.category
      questionCategoryToAdd = options.category
      currentQuestionPosition.value = Number(options.position)
      break
    default:
      pageTitle.value = '编辑题目'
      currentQuestion.value = questionnaire.currentQuestion!
      currentQuestionCategory.value = questionnaire.currentCategoryQuestion?.questionCategory ?? ''
      break
  }
})

//#region 问题类别相关

/** 问题类别列表 */
const categoryList = ref<string[]>(currentQuestionCategoryList)

/** 修改问题类别顺序更新时的事件回调 */
const sortHandle = (categoryOrder: string[]) => {
  sortQuestionListsByCategory(categoryOrder)
}

/** 变更当前题目的类别 */
const changeQuestionCategory = (category: string) => {
  currentQuestionCategory.value = category
}

//#endregion

/** 「确定」按钮点击事件 */
const confirmBtnClick = () => {
  // 判断题目名称是否为空
  if (!currentQuestion.value.title) {
    showToast('题目不能为空')
    return
  }
  switch (pageStatus.value) {
    // 编辑题目
    case 'edit':
      questionnaire.editCurrentQuestion(currentQuestion.value)
      questionnaire.editCurrentQuestionCategory(currentQuestionCategory.value!)

      // 被编辑题目的分类的索引
      const categoryIndex = questionnaire.currentQuestionnaire?.categoryQuestionList?.findIndex((item) => {
        return item.questionCategory === currentQuestionCategory.value
      })

      // 被编辑题目所在的问卷列表
      const currentCategoryQuestionList = questionnaire.currentQuestionnaire?.categoryQuestionList?.find((item) => {
        return item.questionCategory === currentQuestionCategory.value
      })

      // 被编辑题目的索引
      const questionIndex = currentCategoryQuestionList?.questionList.findIndex((item) => {
        return item.id === questionnaire?.currentQuestion?.id
      })

      // 修改焦点问题的索引
      questionnaire.changeFocusedQuestionIndex(categoryIndex || 0, questionIndex || 0)
      break
    // 添加题目
    case 'add':
      questionnaire.addQuestion(currentQuestion.value, currentQuestionCategory.value!)
      break
    // 插入题目
    case 'insert':
      // 如果不是在同一个分类下插入，则重置插入位置
      if (questionCategoryToAdd != currentQuestionCategory.value) {
        currentQuestionPosition.value = -1
      }

      questionnaire.addQuestion(currentQuestion.value, currentQuestionCategory.value!, currentQuestionPosition.value)

      break
  }
  back()
}

</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background-color: #f2f8f3;

  // 页面主体
  .container {
    width: 100%;
    height: 1100.15rpx;
    padding-top: 23.08rpx;

    // 编辑框
    .edit-box {
      width: 100%;
      min-height: 148.08rpx;
      background-color: #fff;
      padding-top: 23.08rpx;
      padding-left: 30.77rpx;
      margin-top: 1.92rpx;
      position: relative;

      .title {
        width: 115.38rpx;
        height: 40.38rpx;
        font-size: 28.85rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: LEFT;
        color: #666666;
        line-height: 40.38rpx;

      }

      .textarea {
        margin-top: 15.38rpx;
        font-size: 32.69rpx;
        line-height: 32.69rpx;
      }
    }

    // 题目类别
    .question-type {
      margin-top: 23.08rpx;
      padding-top: 23.08rpx;
      padding-left: 30.77rpx;
      width: 100%;
      min-height: 332.69rpx;
      background-color: #fff;

      .title {
        font-size: 28.85rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: LEFT;
        color: #666666;
        line-height: 28.85rpx;
      }

      // 题目类别
      .type-container {
        margin-top: 23.08rpx;
      }
    }

    // 底部
    .bottom {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 24.8718vw;
      background-color: #fff;
      display: flex;
      justify-content: center;

      .confirm-btn {
        margin-top: 10px;
        width: 657.69rpx;
        height: 80.77rpx;
        background: #17ce92;
        border-radius: 7.69rpx;

        font-size: 30.77rpx;
        font-weight: 600;
        text-align: CENTER;
        color: #ffffff;
        line-height: 80.77rpx;
      }
    }
  }
}
</style>
